import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;
const confirm = Modal.confirm;
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

class DoRepairViewModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        confirm({
          title: '提示',
          content: '确认维修？',
          onOk() {
            for (var i = 0; i < values.detailList.length; i++) {
              values.detailList[i].id = values.detailList[i].id_;
              values.detailList[i].repairId = values.detailList[i].repairId_;
              values.detailList[i].assetId = values.detailList[i].assetId_;
            }
            dispatch({
              type: `repair/doRepair`,
              payload: values,
            })
          },
        });
      }
    });
  };


  render() {
    const { children, dispatch, viewDetailList, item, } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout2 = {
      labelCol: { span: 7 },
      wrapperCol: { span: 16 },
    }; 
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14  },
    };
    const columns = [{
      fixed: 'left',
      title: '资产编号',
      dataIndex: 'assetNo',
      key: 'assetNo',
      width: 150
    }, {
      title: '资产分类',
      dataIndex: 'typeName',
      key: 'typeName',
      width: 120
    }, {
      title: '设备名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 150
    }, {
      title: '品牌',
      dataIndex: 'brandName',
      key: 'brandName',
      width: 100,
    }, {
      title: '设备型号',
      dataIndex: 'modelName',
      key: 'modelName',
      width: 120,
    }, {
      title: '设备序列号',
      dataIndex: 'serialNo',
      key: 'serialNo',
      width: 150,
    }, {
      title: 'RFID编码',
      dataIndex: 'rfidNo',
      key: 'rfidNo',
      width: 100,
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 70,
      render: (value, row, index) => {
        return (
          value == 1 ? "已维修" : value == 2 ? "未维修" : ''
        )
      }
    }, {
      title: '所在机房',
      dataIndex: 'roomName',
      key: 'roomName',
      width: 160,
    }, {
      title: '所在机柜',
      dataIndex: 'rackName',
      key: 'rackName',
      width: 120,
    }, {
      title: '起始U位',
      dataIndex: 'startU',
      key: 'startU',
      width: 80,
    }, {
      title: '购置时间',
      dataIndex: 'buyTime',
      key: 'buyTime',
      width: 120,
    }, {
      title: '维保结束日期',
      dataIndex: 'expirationTime',
      key: 'expirationTime',
      width: 120,
    },
    {
      title: '故障原因',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
    },
    {
      title: '维修结果描述',
      dataIndex: 'repairRemark',
      key: 'repairRemark',
      width: 150,
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width:80,
      render: (text, record) => (
        <span>
          <a onClick={onRepairRemark.bind(null, record)}>维修备注</a>
        </span>
      ),
    }
    ];
    const onRepairRemark = (data) => {
      const { dispatch } = this.props;
      dispatch({
        type: 'repair/editRepairRemark',
        payload: data,
      })
    };
    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}
          width={1000}
          visible={this.props.visible}
          onOk={this.okHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ width: 'auto', backgroundColor: '#fff' }}>
            <div style={{ }}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                <Form layout={'inline'} style={{ marginTop: '-16px' }}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('detailList', { initialValue: viewDetailList })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('operatorBy', { initialValue: item.operatorBy_ + '' })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <Row gutter={4}>
                    <Col span={6}>
                      <FormItem
                        label="维修单号"
                        {...formItemLayout2}
                      >
                        {
                          getFieldDecorator('id', {
                            initialValue: item.id_,
                          })(<Input readOnly="readonly" style={{ width: '160px' }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                      <FormItem
                        label="所在机房"
                        {...formItemLayout2}
                      >
                        {getFieldDecorator('roomName', {
                          initialValue: item.roomName,
                        })(<Input readOnly="readonly" style={{ width: '170px' }} />)}
                      </FormItem>
                    </Col>

                    <Col span={5}>
                      <FormItem
                        label="操作人"
                        {...formItemLayout2}
                      >
                        {getFieldDecorator('operatiorName', {
                          initialValue: item.operatiorName,
                        })(<Input readOnly="readonly" style={{ width: '140px' }} />)}
                      </FormItem>
                    </Col>
                    <Col span={7}>
                      <FormItem
                        label="预计执行时间"
                        {...formItemLayout}
                      >
                        {
                          getFieldDecorator('execute_Time', {
                            initialValue: item.executeTime,
                          })(<Input readOnly="readonly" style={{ width: '152px' }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>

                  <Row style={{ marginTop: '20px' }}>
                    <Col span={24}>
                      <FormItem
                        label="维修备注"
                      >
                        {
                          getFieldDecorator('remark', {
                            initialValue: item.remark,
                          })(<Input style={{ width: '865px' }} type="textarea" readOnly="readonly" autosize={{ minRows: 3, maxRows: 3 }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '20px', marginBottom: '10px' }}>
                    <Col span={24}>
                      <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                    </Col>
                  </Row>
                  <div style={{ }}>
                    <div style={{ width: '100%',  padding: "10px 20px 20px" }}>
                      <Table columns={columns}
                        rowKey={record => record.id_}
                        dataSource={viewDetailList}
                        pagination={false}
                        scroll={{ x: 2100 }}
                      />
                    </div>
                  </div>
                </Form>
              </div>
            </div>
          </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(DoRepairViewModal)
